Canvas kurz & gut
Von David Flanagan
()
Über dieses E-Book
Canvas - kurz & gut versetzt Sie rasch in die Lage, interaktive und animierte Grafiken zu erzeugen. Neben einem einführenden Tutorial finden Sie in diesem Buch eine Referenz, die das canvas-Element sowie seine Klassen und Methoden dokumentiert. Das Buch richtet sich an erfahrene Webprogrammierer, die bereits JavaScript-Kenntnisse mitbringen.
David Flanagan ist von Hause aus Programmierer, er verbringt seine Zeit aber am liebsten damit, Fachbücher zu IT-Fachthemen zu schreiben. Für O'Reilly hat er unter anderem JavaScript - Das umfassende Referenzwerk sowie JavaScript - kurz & gut verfasst. Sein Blog finden Sie unter davidflanagan.com.
Mehr von David Flanagan lesen
JavaScript kurz & gut Bewertung: 3 von 5 Sternen3/5JavaScript – Das Handbuch für die Praxis: Meistern Sie die beliebte Sprache für Web und Node.js Bewertung: 0 von 5 Sternen0 Bewertungen
Ähnlich wie Canvas kurz & gut
Ähnliche E-Books
Moderne Webanwendungen mit AngularJS Bewertung: 0 von 5 Sternen0 BewertungenHTML 5 meets GWT Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Java-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenWeb Services mit Apache CXF: Schnell und einfach erklärt Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und TypeScript für C#-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenWebanwendungen erstellen mit Vue.js: MVVM-Muster für konventionelle und Single-Page-Webseiten Bewertung: 0 von 5 Sternen0 BewertungenVue.js für alle: Wissenswertes für Einsteiger und Experten Bewertung: 0 von 5 Sternen0 BewertungenDie Serverwelt von Node.js Bewertung: 0 von 5 Sternen0 BewertungenOpenLaszlo: schnell + kompakt Bewertung: 0 von 5 Sternen0 BewertungenDurchstarten mit React: Web-Apps einfach und modular entwickeln Bewertung: 0 von 5 Sternen0 BewertungenVue.js kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenCSS3: Die Referenz für Webentwickler Bewertung: 0 von 5 Sternen0 BewertungenForms over Data mit Knockout.js: Die freie MVVM-JavaScript-Bibliothek im Praxiseinsatz Bewertung: 0 von 5 Sternen0 BewertungenSoftware Development Trends: Wegweisende Beiträge für eine neue IT: Wegweisende Beiträge für eine neue IT Bewertung: 0 von 5 Sternen0 BewertungenCSS: schnell+kompakt Bewertung: 0 von 5 Sternen0 BewertungenReact: Grundlagen, fortgeschrittene Techniken und Praxistipps – mit TypeScript und Redux Bewertung: 0 von 5 Sternen0 BewertungenApache Tapestry: Einstieg in die komponentenorientierte Webentwicklung Bewertung: 0 von 5 Sternen0 BewertungenCSS: Best Practices und Wartbarkeit Bewertung: 0 von 5 Sternen0 BewertungenEnterprise Java Web Services Bewertung: 0 von 5 Sternen0 BewertungenDocker und die Containerwelt: Einstieg und Expertentipps rund um Docker-Container Bewertung: 1 von 5 Sternen1/5Vaadin mit Eclipse, Clojure und OSGi Bewertung: 0 von 5 Sternen0 BewertungenJava FX - Status Quo: Status Quo Bewertung: 0 von 5 Sternen0 BewertungenNext Level JavaScript: Schlagworte Bewertung: 0 von 5 Sternen0 BewertungenSpring: Vier Perspektiven auf Framework und Ökosystem Bewertung: 0 von 5 Sternen0 BewertungenEssential React für Anfänger: 100 unverzichtbare Tipps Bewertung: 0 von 5 Sternen0 BewertungenEinstieg in TypeScript: Grundlagen für Entwickler Bewertung: 0 von 5 Sternen0 BewertungenXtend beyond Java: DSL für mobile Business-Apps Bewertung: 0 von 5 Sternen0 BewertungenASP.NET Core: Eine Einführung Bewertung: 0 von 5 Sternen0 BewertungenReact Native: Native Apps parallel für Android und iOS entwickeln Bewertung: 0 von 5 Sternen0 BewertungenRuby Pakete 100 Stöße: Eine Stunde Meisterklasse, Ausgabe 2024 Bewertung: 0 von 5 Sternen0 Bewertungen
Programmieren für Sie
Python kurz & gut: Für Python 3.x und 2.7 Bewertung: 3 von 5 Sternen3/5Python programmieren lernen: Der spielerische Einstieg mit Minecraft Bewertung: 0 von 5 Sternen0 BewertungenDas große Python3 Workbook: Mit vielen Beispielen und Übungen - Programmieren leicht gemacht! Bewertung: 4 von 5 Sternen4/5Python-Grundlagen Bewertung: 0 von 5 Sternen0 BewertungenC++: Eine kompakte Einführung Bewertung: 0 von 5 Sternen0 BewertungenGames | Game Design | Game Studies: Eine Einführung (Deutschsprachige Ausgabe) Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren für Einsteiger: Teil 1 Bewertung: 0 von 5 Sternen0 BewertungenDas Excel SOS-Handbuch: Wie sie Excel (2010-2019 & 365) schnell & einfach meistern. Die All-in-One Anleitung für ihren privaten & beruflichen Excel-Erfolg! Bewertung: 0 von 5 Sternen0 BewertungenPython | Schritt für Schritt Programmieren lernen: Der ultimative Anfänger Guide für einen einfachen & schnellen Einstieg Bewertung: 0 von 5 Sternen0 BewertungenMicrosoft Word 2016 (Microsoft Press): Einfache Anleitungen für wichtige Aufgaben Bewertung: 0 von 5 Sternen0 BewertungenSQL – kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenDie ultimative FRITZ!Box Bibel - Das Praxisbuch 2. aktualisierte Auflage - mit vielen Insider Tipps und Tricks - komplett in Farbe Bewertung: 0 von 5 Sternen0 BewertungenRoutineaufgaben mit Python automatisieren: Praktische Programmierlösungen für Einsteiger Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5SQL von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5Hacken mit Python und Kali-Linux: Entwicklung eigener Hackingtools mit Python unter Kali-Linux Bewertung: 0 von 5 Sternen0 BewertungenEigene Spiele programmieren – Python lernen: Der spielerische Weg zur Programmiersprache Bewertung: 0 von 5 Sternen0 BewertungenRaspberry Pi: Einstieg • Optimierung • Projekte Bewertung: 5 von 5 Sternen5/5Programmieren für Einsteiger: Teil 2 Bewertung: 0 von 5 Sternen0 BewertungenMicrocontroller für das IoT Bewertung: 0 von 5 Sternen0 BewertungenDokumentenmanagement mit Microsoft Access: Vollwertiges DMS mit Quellcode und Erläuterungen Bewertung: 0 von 5 Sternen0 BewertungenRaspberry Pi: Mach's einfach: Die kompakteste Gebrauchsanweisung mit 222 Anleitungen. Geeignet für Raspberry Pi 3 Modell B / B+ Bewertung: 0 von 5 Sternen0 BewertungenMikrocontroller in der Elektronik: Mikrocontroller programmieren und in der Praxis einsetzen Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenDie ultimative QNAP NAS Bibel - Das Praxisbuch - mit vielen Insider Tipps und Tricks - komplett in Farbe Bewertung: 0 von 5 Sternen0 BewertungenSoftwareentwicklungsprozess: Von der ersten Idee bis zur Installation Bewertung: 0 von 5 Sternen0 BewertungenTraumjob IT 2021: Branchenüberblick, Erfahrungsberichte und Tipps zum Berufseinstieg Bewertung: 5 von 5 Sternen5/5Linux Grundlagen - Ein Einstieg in das Linux-Betriebssystem Bewertung: 0 von 5 Sternen0 BewertungenJava 8 - Die Neuerungen: Lambdas, Streams, Date and Time API und JavaFX 8 im Überblick Bewertung: 0 von 5 Sternen0 BewertungenDocker: Webseiten mittels Containerarchitektur erstellen Bewertung: 3 von 5 Sternen3/5
Rezensionen für Canvas kurz & gut
0 Bewertungen0 Rezensionen
Buchvorschau
Canvas kurz & gut - David Flanagan
Canvas
kurz & gut
David Flanagan
Lars Schulten
Copyright © 2011 O'Reilly Verlag GmbH & Co. KG
Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Satz: Reemers Publishing Services GmbH, Krefeld, www.reemers.de, Druck: fgb freiburger graphische betriebe; www.fgb.de
Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.
O'Reilly Verlag GmbH & Co. KGBalthasarstr. 81 50670Köln kommentar@oreilly.de
Vorwort
Dieses Buch dokumentiert die JavaScript-API zum Zeichnen von Grafiken in ein HTML-Kapitel 1 ist eine Einführung, die alle Canvas-Funktionen erklärt und anhand von Beispielen illustriert. Kapitel 2 beinhaltet eine Referenz zu den Canvas-bezogenen Klassen, Methoden und Eigenschaften.
Dieses Buch ist ein Auszug aus dem erheblich umfangreicheren Buch JavaScript: Das umfassende Handbuch; mein Verlag und ich waren der Meinung, dass das
Mein Dank gilt Raffaele Cecco, der das Buch und die Codebeispiele sorgfältig durchgesehen hat. Außerdem danke ich meinem Lektor, Mike Loukides, für seine Begeisterung für dieses Projekt, und Simon St. Laurent, der das Material vom Format für das »Umfassende Handbuch« in das »kurz & gut«-Format überführt hat.
Die Beispiele in diesem Buch können von der Webseite zum Buch heruntergeladen werden, auf der auch eventuelle Fehler aufgeführt werden, sollten solche nach Veröffentlichung des Buches entdeckt werden:
Kapitel 1. Canvas-Tutorial
Dieses Buch erläutert, wie man mit JavaScript und dem HTML-
Der Code, der auf Clientseite zur Erstellung der Grafiken genutzt wird, ist normalerweise erheblich kleiner als die Bilder selbst und spart damit eine Menge Bandbreite.
Dass Aufgaben vom Server auf den Client verlagert werden, reduziert die Last auf dem Server und kann die Ausgaben für Hardware um einiges mindern.
Die clientseitige Grafikgenerierung fügt sich gut in die Architektur von Ajax-Anwendungen ein, in denen der Server die Daten stellt und sich der Client um die Darstellung dieser Daten kümmert.
Der Client kann Grafiken schnell und dynamisch neu zeichnen. Das ermöglicht grafikintensive Anwendungen (wie Spiele und Simulationen), die schlicht nicht machbar sind, wenn jeder Frame einzeln von einem Server heruntergeladen werden muss.
Das Schreiben von Grafikprogrammen ist ein Vergnügen, und das
Das
Canvas im IE
Wenn Sie das
Stehen diese Zeilen am Anfang Ihrer Webseiten, funktionieren
Große Teile der Canvas-Zeichen-API werden nicht im
3-D-Grafiken in einem Canvas
Als dies geschrieben wurde, begannen Browserhersteller gerade damit, eine 3-D-Grafik-API für das
Ein einfaches Beispiel für die Canvas-API sehen Sie im folgenden Code, der ein rotes Rechteck und einen blauen Kreis in
Das ist ein rotes Rechteck:
Das ist ein blauer Kreis:
// Das erste Canvas-Element und seinen Kontext abrufen
var canvas = document.getElementById(square
);
var context = canvas.getContext(2d
);
// Etwas in das Canvas zeichnen
context.fillStyle = #f00
; // Die Farbe auf Rot setzen
context.fillRect(0,0,10,10); // Ein kleines Rechteck
// füllen
// Das zweite Canvas und seinen Kontext abrufen
canvas = document.getElementById(circle
);
context = canvas.getContext(2d
);
// Einen Pfad beginnen und ihm einen Kreis hinzufügen
context.beginPath();
context.arc(5, 5, 5, 0, 2*Math.PI, true);
context.fillStyle = #00f
; // Die Füllfarbe auf Blau
// setzen
context.fill(); // Den Pfad füllen
Abbildung 1.1 Einfache Canvas-Grafiken
Die Canvas-API beschreibt komplexe Figuren als » Pfade« von Linien und Kurven, die gezeichnet oder gefüllt werden können. Ein Pfad wird durch eine Folge von Methodenaufrufen definiert, wie beispielsweise die beginPath()- und arc()-Aufrufe aus dem vorangegangenen Code. Nachdem ein Pfad definiert ist, operieren andere Methoden wie fill() auf diesem Pfad. Verschiedene Eigenschaften des Kontext-Objekts wie fillStyle legen fest, wie diese Operationen ausgeführt werden. Die nächsten Unterabschnitte erläutern die folgenden Dinge:
Wie man Pfade definiert und die Linie des Pfads zeichnet oder das Innere eines Pfads füllt.
Wie man die Grafikattribute des Canvas-Kontext-Objekts setzt und abfragt und wie man den aktuellen Status dieser